<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }">后台管理</el-breadcrumb-item>
      <el-breadcrumb-item>日志</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>

    <el-row :gutter="20">
      <el-col :span="8">
        <el-input placeholder="请输入用户名" v-model="slur" clearable @clear="loadLogList()">
          <el-button slot="append" icon="el-icon-search" @click="loadLogList()"></el-button>
        </el-input>
      </el-col>
    </el-row>

    <el-row >
      <el-button type="danger"@click="deleteAll()">全部删除</el-button>
    </el-row>






    <el-table :data="list"
              style="width: 100%"
              v-loading="listLoading"
              element-loading-text="Loading"
              border
              fit
              highlight-current-row>

      <el-table-column  prop="id" label="编号" width="60"></el-table-column>
      <el-table-column prop="userName" label="用户名" width="200"></el-table-column>
      <el-table-column prop="description" label="操作描述" width="160"></el-table-column>
      <el-table-column prop="method" label="请求方法" width="350"></el-table-column>
      <el-table-column prop="params" label="请求参数" width="120"></el-table-column>
      <el-table-column prop="ip" label="ip地址" width="120"></el-table-column>
      <el-table-column prop="createDate" label="操作时间" width="140"></el-table-column>
      <el-table-column label="操作" width="120" align="center" >
        <template slot-scope="scope">
          <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              size="mini"
              @click="openDeleteConfirm(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        align="center"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="limits"
        layout="prev, pager, next, jumper"
        :total="count">
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      timer:null,
      multipleSelectionAll: [],
      count: 0,
      currentPage: 1,
      start:0,
      limits: 8,
      list: [],//后端返回的结果
      listLoading: true,
      slur:""
    }
  },
  methods: {
    drop(){
      let url = 'http://localhost:8989/logs/deleteAll';
      console.log('url = ' + url);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url).then((response) => {
        let responseBody = response.data;
        console.log(responseBody);
        if (responseBody.state != 20000) {
          this.$message.error(responseBody.message);
        }
        if (responseBody.state == 20000 || responseBody.state == 40400) {
          this.loadLogList();
        }
      })
    },
    deleteAll(){
      const message = '执行全部删除，是否继续？！！！！！！！！';
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.drop();
      }).catch(() => {
      });
    },
    handleDelete(Log) {
      let url = 'http://localhost:8989/logs/' + Log.id + '/deletebyId';
      console.log('url = ' + url);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url).then((response) => {
        let responseBody = response.data;
        console.log(responseBody);
        if (responseBody.state != 20000) {
          this.$message.error(responseBody.message);
        }
        if (responseBody.state == 20000 || responseBody.state == 40400) {
          this.loadLogList();
        }
      })
    },
    openDeleteConfirm(Log) {
      const message = '此操作将删除【' + Log.id+ '】消息，是否继续？';
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDelete(Log);
      }).catch(() => {
      });
    },
    /* 查询log总数 */
    countLog() {
      console.log('countKnow');
      let slur = this.slur;
      if (this.slur === '') {
        let url = 'http://localhost:8989/logs/logCount';
        console.log('url = ' + url);
        this.axios
            .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
            .get(url).then((response) => {
          let responseBody = response.data;
          this.count = responseBody.data;
        })
      }else {
        let url = 'http://localhost:8989/logs/' + slur + '/logCount';
        console.log('url = ' + url);
        this.axios
            .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
            .get(url).then((response) => {
          let responseBody = response.data;
          this.count = responseBody.data;
        })
      }

    },
    /* 分页模糊查询 */
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      console.log("条数:" + this.limits);
      let limit = this.limits;
      let start = (val - 1)* this.limits;
      console.log("条数:" + limit);
      let slur = this.slur;
      if (this.slur !== '') {
        let url = 'http://localhost:8989/logs/' + start + '/' + limit + '/' + slur + '/logListPage';
        console.log('url = ' + url);
        this.listLoading = true;
        this.axios
            .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
            .get(url).then((response) => {
          let responseBody = response.data;
          this.list = responseBody.data;
          this.listLoading = false;
        })
      }else {
        let url = 'http://localhost:8989/logs/' + start + '/' + limit +  '/logListPage';
        console.log('url = ' + url);
        this.listLoading = true;
        this.axios
            .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
            .get(url).then((response) => {
          let responseBody = response.data;
          this.list = responseBody.data;
          this.listLoading = false;
        })
      }


    },
    /* 首次访问查询Log列表 */
    loadLogList() {
      console.log('loadLogList');
      /*第一页显示8条数据*/
        let url = 'http://localhost:8989/logs/0/8/logListPage';
        console.log('url = ' + url);
        this.listLoading = true;
        this.axios
            .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
            .get(url).then((response) => {
          let responseBody = response.data;
          this.list = responseBody.data;
          this.listLoading = false;
        })
    }
  },
  mounted() {
    console.log('初始化项目列表数据');
      this.loadLogList();
      this.countLog();

  }
}

</script>



